<template>
	<view class="Details">
		<nav-bars ref="navBar" :scrollTop="scrollTop" :transparentFixedFontColor="scrollTop > 400 ? '#333' : '#fff'" type="transparentFixed" title="团队管理"></nav-bars>
		<view class="BgHead">
			<image class="BgImg" :src="`${ImgUrl}/static/superHK/topBg.png`" mode=""></image>
			<view class="flex align-center">
				<view class="topBox flex align-center justify-between">
					<view class="left flex align-center">
						<image :src="`${ImgUrl}/static/superHK/team/reviewed.png`" mode=""></image>
						待审核人员
					</view>
					<view class="num flex align-center">
						{{count}}人
					</view>
				</view>
			</view>
		</view>

		<view class="Order" v-if="staffList.length>0">
			<view class="staffList">
				<view class="item flex align-center" v-for="(item, index) in staffList" :key="index">
					<view class="imgBox">
						<image v-if="item.headimg" :src="item.headimg" mode=""></image>
						<image v-else :src="`${ImgUrl}defaultImg.png`" mode=""></image>
					</view>
					<view class="staffInfo">
						<view class="staffName flex align-center justify-between">
							<view class="userName">
								{{ item.realname ? item.realname : item.nickname }}
								<view class="time mt-5">申请时间：{{item.create_time}}</view>
							</view>
							<view class="cancelBtn" @click="toAuditAgree(item)">同意申请</view>
						</view>
					</view>
				</view>
				<u-loadmore :status="status" :icon-type="iconType" :load-text="loadText" />
			</view>
		</view>
		<view style="position: absolute;top: 55%;left: 50%;transform: translate(-50%, -50%);" v-else>
			<u-empty mode="list" text="暂无数据" icon-size="550" :src="`${ImgUrl}/static/superHK/notList.png`"></u-empty>
		</view>
		<!-- <view class="addStaffBtn"><view class="btn" @click="show = true">+ 添加员工</view></view> -->
	</view>
</template>
<script>
import { GetAuditList, AuditAgree } from '@/service/superHK.js'
export default {
	components: {},
	data() {
		return {
			status: 'loadmore',
			iconType: 'flower',
			loadText: {
				loadmore: '轻轻上拉',
				loading: '努力加载中',
				nomore: '实在没有了~'
			},
			ImgUrl: this.$static,
			scrollTop: 0,
			NavHeight: uni.getStorageSync('StatusBarHeight').height,
			page: 1,
			pageSize: 10,
			count: 0,
			staffList: [],
		};
	},
	onPageScroll(e) {
		let that = this;
		that.scrollTop = e.scrollTop;
	},
	onReachBottom() {
		const that = this
		that.GetStaffList('Reach')
	},
	computed: {},
	watch: {},
	created() {},
	onLoad(options) {
		const that = this;
		that.GetStaffList();
	},
	methods: {

		// 获取员工列表
		async GetStaffList(type) {
			const that = this;
			if(type == 'Reach'){
				that.page++
			}else{
				that.page=1
			}
			let params = {
				page: that.page,
				pageSize: that.pageSize,
			};
			let res = await GetAuditList(params);
			console.log(res);
			if (res.code == 1) {
				let List = res.data.list;
				if(type=='Reach'){
					if(!List.length){
						that.status = 'nomore'
					}else{
						that.status = 'loading'
					}
					that.staffList = that.staffList.concat(List);
					that.count = res.data.count;
				}else{
					if(List.length<10){
						that.status = 'nomore'
					}
					that.staffList = List;
					that.count = res.data.count;
				}
			}
		},
		
		// 同意申请按钮
		toAuditAgree(item){
			const that = this;
			uni.showModal({
				content:'确定要同意该申请吗？',
				success: async res => {
					if(res.confirm){
						let params = {
							status:1,
							remark:'',
							audit_id:item.id
						}
						let res = await AuditAgree(params)
						if(res.code == 1){
							uni.showToast({
								title:'已同意该申请',
								icon:'success'
							})
							that.GetStaffList()
						}else{
							uni.showToast({
								title:res.msg,
								icon:'none'
							})
						}
					}
				}
			})
		},

	}
};
</script>
<style lang="less">
page {
	background: #fff;
}
.Details {
	padding-bottom: constant(safe-area-inset-bottom);
	padding-bottom: env(safe-area-inset-bottom);
}
.BgHead {
	height: 380rpx;
	padding: 32rpx;
	z-index: 1;
	position: relative;
	overflow: hidden;
	.BgImg{
		width: 100%;
		height: 540rpx;
		position: absolute;
		top: 0;
		left: 0;
		z-index: -1;
	}
	.topBox {
		margin-top: 240rpx;
		width: 100%;
		font: 500 34rpx/48rpx PingFang SC;
		color: #fff;
		.left{
			image {
				width: 31rpx;
				height: 32rpx;
				margin-right: 16rpx;
			}
		}
	}
}
.Order {
	margin-top: -30rpx;
	background: #fff;
	border-radius: 32rpx 32rpx 0rpx 0rpx;
	overflow: hidden;
	position: relative;
	z-index: 2;
	padding: 24rpx 32rpx;
	.topNav {
		height: 46rpx;
		padding: 0 200rpx;
		margin-top: 31rpx;
		margin-bottom: 14rpx;
		.line {
			width: 2rpx;
			height: 28rpx;
			background-color: #cecece;
		}
		.item {
			font: bold 26rpx/37rpx PingFang SC;
			color: #757a81;
		}
		.active {
			font: 800 34rpx/47rpx PingFang SC;
			color: #08131a;
			position: relative;
			transition: all 0.3s;
		}
		.active:after {
			content: '';
			width: 80rpx;
			height: 16rpx;
			position: absolute;
			left: 0rpx;
			bottom: 3rpx;
			z-index: 0;
			background: linear-gradient(270deg, rgba(0, 158, 238, 0) 0%, rgba(0, 158, 238, 0.3) 100%);
		}
	}

	.staffList {
		width: 100%;
		// padding-bottom: 130rpx;
		.item {
			.imgBox {
				width: 128rpx;
				height: 128rpx;
				border-radius: 50%;
				flex-shrink: 0;
				overflow: hidden;
				margin-right: 20rpx;
				image {
					width: 100%;
					height: 100%;
				}
			}
			.staffInfo {
				width: 100%;
				border-bottom: 2rpx solid #dfdfdf;
				padding: 50rpx 0;
				.staffName {
					font: 500 32rpx/45rpx PingFang SC;
					color: #08131a;
					.userName{
						.time{
							font: 500 22rpx/30rpx PingFang SC;
							color: #A6A6A6;
						}
					}
					.moreBtn {
						position: relative;
						width: 60rpx;
						height: 32rpx;
						.moreImg {
							width: 100%;
							height: 100%;
							border-radius: 20rpx;
							background-color: #f1f1f1;
							image {
								width: 25rpx;
								height: 6rpx;
							}
						}
						.moreBox {
							position: absolute;
							top: 0;
							right: 72rpx;
							width: 180rpx;
							z-index: 2;
							border-radius: 16rpx 0rpx 16rpx 16rpx;
							background-color: rgba(0, 0, 0, 0.6);
							.item {
								display: flex;
								border-bottom: 2rpx solid rgba(241, 241, 241, 0.14);
								align-items: center;
								justify-content: space-between;
								padding: 20rpx 43rpx 22rpx 34rpx;
								font: 500 26rpx/37rpx PingFang SC;
								color: #f1f1f1;
								image {
									width: 30rpx;
									height: 30rpx;
								}
							}
						}
					}
				}
				.tagBox {
					width: 538rpx;
					white-space: nowrap;
					margin-top: 12rpx;
					text {
						padding: 4rpx 16rpx;
						display: inline-block;
						border-radius: 20rpx;
						margin-right: 16rpx;
						background-color: rgba(113, 198, 240, 0.15);
						font: 500 22rpx/30rpx PingFang SC;
						color: #009eee;
					}
					.active {
						background-color: rgba(189, 229, 116, 0.15);
						color: #90c42f;
					}
				}

				// 取消冻结按钮
				.cancelBtn {
					width: 128rpx;
					height: 52rpx;
					background-color: #dfdfdf;
					border-radius: 26rpx;
					font: 500 22rpx/52rpx PingFang SC;
					color: #757a81;
					text-align: center;
				}
			}
			.activeRoot {
				padding: 47rpx 0 38rpx 0;
			}
		}
	}
}
.addStaffBtn {
	width: 100%;
	position: fixed;
	bottom: 0;
	background-color: #fff;
	left: 0;
	z-index: 3;
	padding-bottom: constant(safe-area-inset-bottom);
	padding-bottom: env(safe-area-inset-bottom);
	.btn {
		width: 580rpx;
		text-align: center;
		height: 92rpx;
		margin: 16rpx auto;
		border-radius: 55rpx;
		background: linear-gradient(129deg, #FEA62B 0%, #F29100 100%);
		font: 500 32rpx/92rpx PingFang SC;
		color: #fff;
	}
}
.u-load-more-wrap{
	padding: 20rpx 0;
}
</style>
